import { UserPlus } from "lucide-react"
import { UserCard } from "@/components/user-card"
import { EmptyState } from "./empty-state"
import { UserCardSkeleton } from "../skeletons/user-card-skeleton"
import { Button } from "@/components/ui/button"
import type { UserFollowing } from "@/types/user"

interface FollowingTabProps {
  following: UserFollowing[]
  isLoading?: boolean
}

export function FollowingTab({ following, isLoading = false }: FollowingTabProps) {
  return (
      <div>
        {isLoading ? (
            <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
              {Array(12)
                  .fill(0)
                  .map((_, i) => (
                      <UserCardSkeleton key={i} />
                  ))}
            </div>
        ) : following.length > 0 ? (
            <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
              {following.map((user) => (
                  <UserCard key={user.id} user={user} />
              ))}
            </div>
        ) : (
            <EmptyState
                icon={<UserPlus className="h-16 w-16 text-muted-foreground" />}
                title="暂无关注"
                description="去发现和关注更多有趣的用户，获取他们的音乐动态"
                action={
                  <Button className="mt-4" size="sm">
                    <UserPlus className="mr-2 h-4 w-4" />
                    发现用户
                  </Button>
                }
            />
        )}
      </div>
  )
}

